<template>
	<view style="padding-bottom: 180rpx;">
		<view class="mainpadding_top ffffff" v-for="(item,index) in tradeList" :key="item.id">
			<view class="flexbetween">
				<view class="titletext bold hei_text">{{item.name}}</view>
				<view class="flexright" @click="item.isessyy=!item.isessyy">
					<view>24小時營業</view>
					<view :class="item.isessyy?'xuanzhongs':'wiexuanzhongs'"></view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="titletext bold hei_text">服務費</view>
				<view class="flexright">
					<view style="border: 1rpx solid #ffb800;padding: 5rpx 30rpx;" class="radius margin_right1">
						<input type="text" class="main_size xiaohei textright " style="width: 200rpx;" v-model="item.fw_price">
					</view>
					<view class="main_size xiaohei bold">%</view>
				</view>
			</view>
			<template v-if="!item.isessyy">
				<view class="flexbetween margin_top">
					<view class="titletext bold hei_text">添加時間段</view>
					<view class="addimg" @click="addTime(index)"></view>
				</view>
				<view class="flexleft flex_wrap">
					<view class="itemtimebox flexcenter margin_top2" v-for="(value,i) in item.childList" :key="i">
						<view class="itemtime">
							<view class="">{{value}}</view>
							<view class="posidel" @click="removeTime(index,i)">
								<u-icon name="close" color="#fff" size="1"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="timestartShow" v-model="valueStart" title="開始時間" mode="time" confirmColor="#FFB800"
			@confirm="timestartConfirm" @cancel="timestartShow = false">
		</u-datetime-picker>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="timeendShow" v-model="valueEnd" title="結束時間" mode="time" confirmColor="#FFB800"
			:minHour="minHour"  @confirm="timeendConfirm" @cancel="timeendShow = false">
		</u-datetime-picker>
		<view class="mainpadding posibottom" style="bottom: 0;">
			<view class="submitbtn" @click="submit">確認</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				valueStart: Number(new Date()),
				valueEnd: Number(new Date()),
				timestartShow: false,
				timeendShow: false,
				minHour: "", //最低小时
				minMinute: "", //最低分钟
				startTime: "", //開始時間
				endTime: "", //结束時間

				tradeList: [{
					id: 1,
					name: "週一",
					fw_price:"",
					childList: [],
					isessyy:false
				}, {
					id: 2,
					fw_price:"",
					name: "週二",
					childList: [],
					isessyy:false
				}, {
					id: 3,
					name: "週三",
					fw_price:"",
					childList: [],
					isessyy:false
				}, {
					id: 4,
					name: "週四",
					fw_price:"",
					childList: [],
					isessyy:false
				}, {
					id: 5,
					name: "週五",
					fw_price:"",
					childList: [],
					isessyy:false
				}, {
					id: 6,
					name: "週六",
					fw_price:"",
					childList: [],
					isessyy:false
				}, {
					id: 7,
					name: "週日",
					fw_price:"",
					childList: [],
					isessyy:false
				}],
				selectIndex: 0, //当前点击的索引
			}
		},
		onLoad(options) {
			let date = new Date()
			this.valueStart = `${date.getHours()}:${date.getMinutes()}`
			this.valueEnd = `${date.getHours()}:${date.getMinutes()}`
			let data=JSON.parse(decodeURIComponent(options.addTimeList))
			console.log(data)
			if(data){
				this.tradeList[0].fw_price = data.motime_rate
				this.tradeList[1].fw_price = data.tutime_rate
				this.tradeList[2].fw_price = data.wetime_rate
				this.tradeList[3].fw_price = data.thtime_rate
				this.tradeList[4].fw_price = data.frtime_rate
				this.tradeList[5].fw_price = data.satime_rate
				this.tradeList[6].fw_price = data.sutime_rate
				if(data.motime){
					let arr = data.motime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[0].childList = arr
					this.tradeList[0].isessyy = flag
				}
				if(data.tutime){
					let arr = data.tutime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[1].childList = arr
					this.tradeList[1].isessyy = flag
				}
				if(data.wetime){
					let arr = data.wetime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[2].childList = arr
					this.tradeList[2].isessyy = flag
				}
				if(data.thtime){
					let arr = data.thtime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[3].childList = arr
					this.tradeList[3].isessyy = flag
				}
				if(data.frtime){
					let arr = data.frtime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[4].childList = arr
					this.tradeList[4].isessyy = flag
				}
				if(data.satime){
					let arr = data.satime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[5].childList = arr
					this.tradeList[5].isessyy = flag
				}
				if(data.sutime){
					let arr = data.sutime.split(",")
					let flag = false
					arr.forEach((item,index)=>{
						if(item=='24小時營業'){
							flag = true
							arr.splice(index,1)
						}
					})
					this.tradeList[6].childList = arr
					this.tradeList[6].isessyy = flag
				}
			}
		},
		methods: {
			addTime(index) {
				this.selectIndex = index
				this.timestartShow = true
			},
			removeTime(index, i) {
				this.tradeList[index].childList.splice(i, 1)
			},
			timestartConfirm(e) { //確認開始時間
				let text = e.value.split(":")
				this.minHour = Number(text[0])
				this.minMinute = Number(text[1])
				this.startTime = e.value
				this.timestartShow = false
				this.timeendShow = true
				console.log(e)
			},
			timeendConfirm(e) { //確認结束時間
				this.endTime = e.value
				this.tradeList[this.selectIndex].childList.push(`${this.startTime}-${this.endTime}`)
				this.timeendShow = false
			},
			submit() {
				let motime = this.tradeList[0].childList
				if(this.tradeList[0].isessyy) motime.unshift('24小時營業')
				let tutime = this.tradeList[1].childList
				if(this.tradeList[1].isessyy) tutime.unshift('24小時營業')
				let wetime = this.tradeList[2].childList
				if(this.tradeList[2].isessyy) wetime.unshift('24小時營業')
				let thtime = this.tradeList[3].childList
				if(this.tradeList[3].isessyy) thtime.unshift('24小時營業')
				let frtime = this.tradeList[4].childList
				if(this.tradeList[4].isessyy) frtime.unshift('24小時營業')
				let satime = this.tradeList[5].childList
				if(this.tradeList[5].isessyy) satime.unshift('24小時營業')
				let sutime = this.tradeList[6].childList
				if(this.tradeList[6].isessyy) sutime.unshift('24小時營業')
				uni.$emit("addTime", {
					motime:motime.join(), //周一營業時間
					tutime:tutime.join(), //周二營業時間
					wetime:wetime.join(), //周三營業時間
					thtime:thtime.join(), //周四營業時間
					frtime:frtime.join(), //周五營業時間
					satime:satime.join(), //周六營業時間
					sutime:sutime.join(), //周日營業時間
					motime_rate:this.tradeList[0].fw_price, //周一服務費
					tutime_rate:this.tradeList[1].fw_price, //周二服務費
					wetime_rate:this.tradeList[2].fw_price, //周三服務費
					thtime_rate:this.tradeList[3].fw_price, //周四服務費
					frtime_rate:this.tradeList[4].fw_price, //周五服務費
					satime_rate:this.tradeList[5].fw_price, //周六服務費
					sutime_rate:this.tradeList[6].fw_price, //周日服務費
				})
				this.http.toast("添加成功");
				setTimeout(() => {
					uni.navigateBack(1)
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itemtimebox {
		width: 33.33%;
	}

	.itemtime {
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		position: relative;
		background-color: #ffefe7;
		color: #fa5f00;
		font-size: 24rpx
	}

	.posidel {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10rpx 12rpx;
		background-color: #fa5f00;
		border-radius: 0 6px 0 10rpx;
	}
</style>